<template>
  <div class="overview-page">
    <!-- 顶部统计卡片 -->
    <div class="stat-cards">
      <a-row :gutter="[16, 16]">
        <a-col :span="6">
          <div class="stat-card total-images">
            <div class="card-content">
              <div class="card-title">图片统计</div>
              <div class="stat-details">
                <div class="stat-item">
                  <div class="stat-label">图片总量</div>
                  <div class="stat-value">
                    <span class="number">{{
                      statistics?.pictureStatistics?.totalCount || '0'
                    }}</span>
                    <span class="unit">张</span>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">已使用</div>
                  <div class="stat-value">
                    <span class="number">{{
                      ((statistics?.pictureStatistics?.totalSize || 0) / (1024 * 1024)).toFixed(2)
                    }}</span>
                    <span class="unit">MB</span>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">剩余容量</div>
                  <div class="stat-value">
                    <span class="number">{{
                      (
                        (statistics?.spaceStatistics?.remainingSize || 104857600) /
                        (1024 * 1024)
                      ).toFixed(2)
                    }}</span>
                    <span class="unit">MB</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card space-usage">
            <div class="card-content">
              <div class="card-title">空间使用</div>
              <div class="stat-details">
                <div class="stat-item">
                  <div class="stat-label">使用率</div>
                  <div class="stat-value">
                    <span class="number">{{
                      (statistics?.spaceStatistics?.usageRate || 0).toFixed(2)
                    }}</span>
                    <span class="unit">%</span>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">空间等级</div>
                  <div class="stat-value">
                    <span class="text">{{
                      statistics?.spaceStatistics?.spaceLevel || '普通版'
                    }}</span>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">总容量</div>
                  <div class="stat-value">
                    <span class="number">{{
                      ((statistics?.spaceStatistics?.maxSize || 104857600) / (1024 * 1024)).toFixed(
                        2
                      )
                    }}</span>
                    <span class="unit">MB</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card review-status">
            <div class="card-content">
              <div class="card-title">审核情况</div>
              <div class="stat-details">
                <div class="stat-item">
                  <div class="stat-label">已通过</div>
                  <div class="stat-value">
                    <span class="number">{{
                      statistics?.pictureStatistics?.approvedCount || '0'
                    }}</span>
                    <span class="unit">张</span>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">待审核</div>
                  <div class="stat-value">
                    <span class="number">{{
                      statistics?.pictureStatistics?.reviewingCount || '0'
                    }}</span>
                    <span class="unit">张</span>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">已驳回</div>
                  <div class="stat-value">
                    <span class="number">{{
                      statistics?.pictureStatistics?.rejectedCount || '0'
                    }}</span>
                    <span class="unit">张</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="stat-card format-stats">
            <div class="card-content">
              <div class="card-title">格式统计</div>
              <div class="stat-details">
                <div class="stat-item">
                  <div class="stat-label">格式总数</div>
                  <div class="stat-value">
                    <span class="number">{{
                      Object.keys(statistics?.pictureStatistics?.formatDistribution || {}).length ||
                      '0'
                    }}</span>
                    <span class="unit">种</span>
                  </div>
                </div>
                <div class="stat-item">
                  <div class="stat-label">主要格式</div>
                  <div class="stat-value">
                    <span class="text">暂无数据</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 图表区域和下半部分的内容 -->
    <div class="data-visualization">
      <a-row :gutter="[16, 16]">
        <!-- 左侧区域：图表展示 -->
        <a-col :span="16">
          <!-- 存储空间使用和分类分布 -->
          <div class="chart-section">
            <a-row :gutter="[16, 16]">
              <a-col :span="12">
                <div class="chart-card">
                  <div class="chart-header">
                    <h3>存储空间使用</h3>
                  </div>
                  <div v-if="hasStorageData" id="storage-pie" class="chart-container"></div>
                  <div v-else class="empty-chart">
                    <a-empty>
                      <template #description>
                        <span>暂无存储数据</span>
                        <p class="empty-tip">开始上传文件即可查看存储统计</p>
                      </template>
                    </a-empty>
                  </div>
                </div>
              </a-col>
              <a-col :span="12">
                <div class="chart-card">
                  <div class="chart-header">
                    <h3>图片分类</h3>
                  </div>
                  <div v-if="hasCategoryData" id="category-pie" class="chart-container"></div>
                  <div v-else class="empty-chart">
                    <a-empty>
                      <template #description>
                        <span>暂无分类数据</span>
                        <p class="empty-tip">上传并分类图片后即可查看统计</p>
                      </template>
                    </a-empty>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>

          <!-- 最近上传预览 -->
          <div class="recent-uploads-section">
            <div class="chart-card">
              <div class="chart-header">
                <h3>最近上传</h3>
              </div>
              <div v-if="recentPictures.length > 0" class="recent-uploads-grid">
                <div
                  v-for="picture in recentPictures"
                  :key="picture.id"
                  class="upload-card"
                  @click="handlePictureClick(picture)"
                >
                  <div class="upload-image">
                    <img :src="IMAGE_PREFIX + picture.thumbnailUrl" :alt="picture.name" />
                    <div class="upload-overlay">
                      <div class="upload-info">
                        <div class="upload-name">{{ picture.name }}</div>
                        <div class="upload-meta">
                          <span class="upload-time">{{ formatDate(picture.uploadTime) }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="empty-uploads">
                <a-empty>
                  <template #description>
                    <span>暂无上传记录</span>
                    <p class="empty-tip">点击上传按钮开始您的创作之旅</p>
                  </template>
                  <a-button type="primary" @click="handleUpload">立即上传</a-button>
                </a-empty>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 右侧区域：活动统计和标签云 -->
        <a-col :span="8">
          <!-- 图片活动统计 -->
          <div class="activity-stats">
            <div class="chart-card">
              <div class="chart-header">
                <h3>文件类型统计</h3>
                <span class="total-count"
                  >共 {{ statistics?.fileTypeStatistics?.totalFiles || 0 }} 个文件</span
                >
              </div>
              <div v-if="hasFileTypeData" class="hexagon-grid">
                <div
                  v-for="(count, type) in statistics?.fileTypeStatistics?.typeDistribution"
                  :key="type"
                  class="hexagon-item"
                >
                  <div class="hexagon" :style="{ '--hex-color': fileTypeColors[type] }">
                    <div class="hexagon-content">
                      <div class="type-icon">
                        <i :class="getFileTypeIcon(type)"></i>
                      </div>
                      <div class="type-info">
                        <span class="type-name">{{ fileTypeMap[type] }}</span>
                        <span class="type-count">{{ count }}</span>
                      </div>
                      <div class="type-percentage">
                        {{
                          (
                            (Number(count) / Number(statistics?.fileTypeStatistics?.totalFiles)) *
                            100
                          ).toFixed(1)
                        }}%
                      </div>
                    </div>
                    <div class="hexagon-border"></div>
                    <div class="hexagon-glow"></div>
                  </div>
                </div>
              </div>
              <div v-else class="empty-chart">
                <a-empty>
                  <template #description>
                    <span>暂无文件类型数据</span>
                    <p class="empty-tip">上传不同类型的文件即可查看分布</p>
                  </template>
                </a-empty>
              </div>
            </div>
          </div>

          <!-- 标签云 -->
          <div class="tag-cloud-section">
            <div class="chart-card">
              <div class="chart-header">
                <h3>热门标签</h3>
              </div>
              <div v-if="hasTagData" class="tag-rank-list">
                <div
                  v-for="(tag, index) in statistics?.activityStatistics?.topTags"
                  :key="tag.tag"
                  class="tag-rank-item"
                >
                  <div class="tag-rank-index" :class="{ 'top-three': index < 3 }">
                    {{ index + 1 }}
                  </div>
                  <div class="tag-rank-content">
                    <span class="tag-name">{{ tag.tag }}</span>
                    <span class="tag-count">{{ tag.count }}</span>
                  </div>
                </div>
              </div>
              <div v-else class="empty-chart">
                <a-empty>
                  <template #description>
                    <span>暂无标签数据</span>
                    <p class="empty-tip">为文件添加标签后即可查看热度</p>
                  </template>
                </a-empty>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed, watch, nextTick, onUnmounted } from 'vue'
  import { message } from 'ant-design-vue'
  import { useRouter } from 'vue-router'
  import { Pie } from '@antv/g2plot'
  import { getUserStatisticsUsingGet1 } from '@/api/yonghumokuaijiekou'
  import { formatDate } from '@/utils/date'
  import { IMAGE_PREFIX } from '@/config/constants'

  const router = useRouter()

  // 用户统计数据
  const statistics = ref<API.UserStatisticsVO>()

  // 格式化文件大小
  const formatSize = (bytes: number) => {
    if (bytes === 0) return '0 B'
    const k = 1024
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }

  // 图表实例
  const charts = ref({
    storagePie: null,
    categoryPie: null,
  })

  // 渲染图表
  const renderCharts = async () => {
    if (!statistics.value) return

    await nextTick()

    // 清理现有图表
    if (charts.value.storagePie) {
      charts.value.storagePie.destroy()
      charts.value.storagePie = null
    }
    if (charts.value.categoryPie) {
      charts.value.categoryPie.destroy()
      charts.value.categoryPie = null
    }

    // 存储空间使用情况
    const storagePieEl = document.getElementById('storage-pie')
    if (storagePieEl) {
      const usedSize = Number((statistics.value.spaceStatistics?.usedSize || 0) / (1024 * 1024))
      const remainingSize = Number(
        (statistics.value.spaceStatistics?.remainingSize || 0) / (1024 * 1024)
      )
      const usageRate = statistics.value.spaceStatistics?.usageRate || 0

      charts.value.storagePie = new Pie(storagePieEl, {
        data: [
          { type: '已用空间', value: usedSize, percentage: usageRate.toFixed(2) },
          { type: '剩余空间', value: remainingSize, percentage: (100 - usageRate).toFixed(2) },
        ],
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        label: {
          type: 'outer',
          content: '{name} {percentage}%',
        },
        legend: {
          position: 'bottom',
        },
        animation: {
          appear: {
            animation: 'fade-in',
          },
        },
        theme: {
          colors10: ['#1890FF', '#52C41A'],
        },
      })
      charts.value.storagePie.render()
    }

    // 图片分类分布
    const categoryPieEl = document.getElementById('category-pie')
    if (categoryPieEl && statistics.value.activityStatistics?.topCategories) {
      const categoryData = statistics.value.activityStatistics.topCategories.map(item => ({
        type: item.category || '未分类',
        value: Number(item.count),
      }))

      charts.value.categoryPie = new Pie(categoryPieEl, {
        data: categoryData,
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        label: {
          type: 'outer',
          content: '{name}: {value}张',
        },
        legend: {
          position: 'bottom',
        },
        animation: {
          appear: {
            animation: 'fade-in',
          },
        },
      })
      charts.value.categoryPie.render()
    }

    // 文件类型分布饼图
    const fileTypePieEl = document.getElementById('file-type-pie')
    if (fileTypePieEl && statistics.value?.fileTypeStatistics?.typeDistribution) {
      const typeData = Object.entries(statistics.value.fileTypeStatistics.typeDistribution).map(
        ([type, count]) => ({
          type: fileTypeMap[type],
          value: Number(count),
          color: fileTypeColors[type],
        })
      )

      const fileTypePie = new Pie(fileTypePieEl, {
        data: typeData,
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        label: {
          type: 'outer',
          content: '{name}\n{percentage}%',
        },
        legend: false,
        color: typeData.map(item => item.color),
        animation: {
          appear: {
            animation: 'fade-in',
          },
        },
      })
      fileTypePie.render()
    }
  }

  // 计算最近上传的图片
  const recentPictures = computed(() => {
    return statistics.value?.activityStatistics?.recentPictures?.slice(0, 9) || []
  })

  // 处理查看更多
  const handleViewMore = () => {
    router.push('/pictures')
  }

  // 处理图片点击
  const handlePictureClick = (picture: any) => {
    // 实现图片预览逻辑
    // TODO: 实现图片预览功能
  }

  // 获取用户统计数据
  const fetchUserStatistics = async () => {
    try {
      const res = await getUserStatisticsUsingGet1({})
      if (res.data?.code === 200) {
        statistics.value = res.data.data
      }
    } catch {
      message.error('获取统计数据失败')
    }
  }

  // 监听数据变化
  watch(
    () => statistics.value,
    () => {
      nextTick(() => renderCharts())
    },
    { deep: true }
  )

  // 组件卸载时清理
  onUnmounted(() => {
    if (charts.value.storagePie) {
      charts.value.storagePie.destroy()
    }
    if (charts.value.categoryPie) {
      charts.value.categoryPie.destroy()
    }
  })

  // 初始化
  onMounted(async () => {
    await fetchUserStatistics()
  })

  // 文件类型映射
  const fileTypeMap = {
    '1': '视频',
    '2': '音频',
    '3': '图片',
    '4': 'PDF',
    '5': 'DOC',
    '6': 'EXCEL',
    '7': 'TXT',
    '8': '代码',
    '9': 'ZIP',
    '10': '其他',
  }

  // 文件类型对应的颜色
  const fileTypeColors = {
    '1': '#ff4d4f',
    '2': '#40a9ff',
    '3': '#73d13d',
    '4': '#ffa940',
    '5': '#1890ff',
    '6': '#52c41a',
    '7': '#722ed1',
    '8': '#faad14',
    '9': '#13c2c2',
    '10': '#8c8c8c',
  }

  // 获取文件类型图标
  const getFileTypeIcon = (type: string) => {
    // 实现获取文件类型图标的逻辑
    // 这里可以根据文件类型返回相应的图标类名
    return 'icon-file' // 临时返回，需要根据实际文件类型返回正确的图标类名
  }

  // 添加数据判断计算属性
  const hasStorageData = computed(() => {
    return Number(statistics.value?.spaceStatistics?.usedSize || 0) > 0
  })

  const hasCategoryData = computed(() => {
    return statistics.value?.activityStatistics?.topCategories?.length > 0
  })

  const hasFileTypeData = computed(() => {
    return Object.keys(statistics.value?.fileTypeStatistics?.typeDistribution || {}).length > 0
  })

  const hasTagData = computed(() => {
    return statistics.value?.activityStatistics?.topTags?.length > 0
  })

  // 添加上传处理函数
  const handleUpload = () => {
    // 这里可以触发上传操作
    router.push('/user/createPicture')
  }
</script>

<style scoped>
  .overview-page {
    animation: fadeIn 0.3s ease-out;
  }

  .stat-cards {
    margin-bottom: 24px;
  }

  .stat-card {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
  }

  .card-content {
    position: relative;
    z-index: 1;
  }

  .card-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.95);
  }

  .stat-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  .stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
  }

  .stat-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    justify-content: flex-end;
  }

  .stat-value .number {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1;
  }

  .stat-value .unit {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
  }

  .stat-value .text {
    font-size: 16px;
    color: #ffffff;
  }

  .total-images {
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  }

  .space-usage {
    background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  }

  .review-status {
    background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
  }

  .format-stats {
    background: linear-gradient(135deg, #fa8c16 0%, #d46b08 100%);
  }

  .chart-card {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 24px;
    height: 100%;
    box-shadow: 0 1px 2px var(--theme-shadow);
    transition: all 0.3s;
  }

  .chart-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .chart-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .chart-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
  }

  .chart-container {
    height: 300px;
    width: 100%;
    min-height: 300px;
  }

  .recent-uploads-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
  }

  .upload-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .upload-card:hover {
    transform: translateY(-4px);
  }

  .upload-image {
    position: relative;
    padding-top: 100%;
  }

  .upload-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .upload-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
  }

  .upload-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .upload-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .upload-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    opacity: 0.8;
  }

  .activity-stats {
    margin-top: 24px;
  }

  .stats-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
  }

  .tag-cloud-section {
    margin-top: 24px;
  }

  .tag-rank-list {
    padding: 8px 0;
  }

  .tag-rank-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .tag-rank-item:last-child {
    border-bottom: none;
  }

  .tag-rank-item:hover {
    background: rgba(0, 0, 0, 0.02);
  }

  .tag-rank-index {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    margin-right: 12px;
    background: #f5f5f5;
    color: #666;
  }

  .tag-rank-index.top-three {
    color: #fff;
  }

  .tag-rank-item:nth-child(1) .tag-rank-index {
    background: linear-gradient(135deg, #ffd700, #ffa500);
  }

  .tag-rank-item:nth-child(2) .tag-rank-index {
    background: linear-gradient(135deg, #c0c0c0, #a9a9a9);
  }

  .tag-rank-item:nth-child(3) .tag-rank-index {
    background: linear-gradient(135deg, #cd7f32, #8b4513);
  }

  .tag-rank-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tag-name {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
  }

  .tag-count {
    font-size: 14px;
    color: #1890ff;
    font-weight: 500;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (max-width: 1200px) {
    .recent-uploads-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 768px) {
    .recent-uploads-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .chart-container {
    height: 280px;
    margin: 0 -20px;
  }

  .file-type-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .file-type-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s;
  }

  .file-type-item:hover {
    background: rgba(0, 0, 0, 0.02);
  }

  .type-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
  }

  .type-name {
    flex: 1;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }

  .type-count {
    margin: 0 12px;
    color: #1890ff;
    font-weight: 500;
  }

  .type-percentage {
    color: rgba(0, 0, 0, 0.45);
    font-size: 12px;
    min-width: 45px;
    text-align: right;
  }

  .total-count {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
  }

  .hexagon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px 0;
    perspective: 1000px;
  }

  .hexagon-item {
    animation: fadeScale 0.6s ease-out forwards;
    opacity: 0;
    transform: scale(0.8);
  }

  .hexagon-item:nth-child(1) {
    animation-delay: 0.1s;
  }
  .hexagon-item:nth-child(2) {
    animation-delay: 0.2s;
  }
  .hexagon-item:nth-child(3) {
    animation-delay: 0.3s;
  }
  .hexagon-item:nth-child(4) {
    animation-delay: 0.4s;
  }
  .hexagon-item:nth-child(5) {
    animation-delay: 0.5s;
  }
  .hexagon-item:nth-child(6) {
    animation-delay: 0.6s;
  }
  .hexagon-item:nth-child(7) {
    animation-delay: 0.7s;
  }

  .hexagon {
    position: relative;
    width: 100%;
    padding-top: 115%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
    --hex-color: #1890ff;
  }

  .hexagon:hover {
    transform: translateZ(20px) rotateX(10deg) rotateY(10deg);
  }

  .hexagon-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: white;
    z-index: 2;
  }

  .type-icon {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--hex-color);
    text-shadow: 0 0 10px var(--hex-color);
  }

  .type-info {
    text-align: center;
  }

  .type-name {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--hex-color);
  }

  .type-count {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 10px var(--hex-color);
  }

  .type-percentage {
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.8;
  }

  .hexagon-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(45deg, transparent 0%, var(--hex-color) 50%, transparent 100%);
    opacity: 0.3;
    z-index: 1;
    animation: borderRotate 4s linear infinite;
  }

  .hexagon-glow {
    position: absolute;
    top: -20%;
    left: -20%;
    right: -20%;
    bottom: -20%;
    background: radial-gradient(circle at center, var(--hex-color) 0%, transparent 70%);
    opacity: 0;
    z-index: 0;
    transition: opacity 0.3s ease;
  }

  .hexagon:hover .hexagon-glow {
    opacity: 0.2;
  }

  @keyframes fadeScale {
    from {
      opacity: 0;
      transform: scale(0.8) translateY(20px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @keyframes borderRotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .chart-header h3 {
    color: rgba(244, 6, 6, 0.85);
  }

  .total-count {
    color: rgba(0, 0, 0, 0.45);
  }

  .chart-section {
    margin-bottom: 16px;
  }

  /* 添加空状态样式 */
  .empty-chart {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
  }

  .empty-uploads {
    padding: 40px;
    text-align: center;
  }

  .empty-tip {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 8px;
  }

  :deep(.ant-empty) {
    .ant-empty-image {
      height: 80px;
    }

    .ant-empty-description {
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
  }

  :deep(.ant-btn-primary) {
    margin-top: 16px;
    height: 36px;
    padding: 0 24px;
    font-size: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1890ff, #096dd9);
    border: none;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.35);

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.45);
    }
  }
</style>
